<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<template id="childModel">
			<input v-model="msg">
			<button v-on:click="notify">点我</button>
		</template>
		<div id="app">
			<p>messages:{{message}}</p>
			<child></child>
		</div>
		<script src="../vue.js"></script>
		<script>
			Vue.config.devtools = true
			Vue.component('child',{
				template:'#childModel',
				data:function(){
					return {
						msg:'hello'
					}
				},
				methods:{
					notify:function(){
						if(this.msg.trim()){
							this.$dispatch('child-msg',this.msg)
							this.msg='';
						}
					}
				}
			})
			var app=new Vue({
				el:'#app',
				data:{
					message:[]
				},
				events:{
					'child-msg':function(msg){
						this.message.push(msg)
					}
				}
			})
		</script>
	</body>
</html>
